$(function () {
    var layer = layui.layer;
    var form = layui.form;
    var laypage = layui.laypage;
    //----------------------------------------------------------------
    // 页面查询参数
    var query = {
        pagenum: 1, //页码值
        pagesize: 5, //每页显示几条数据
        username: '', //姓名
    }
    //----------------------------------------------------------------
    //渲染分页功能
    function renderPage(total) {
        // console.log(total);
        laypage.render({
            elem: 'pageBox', //分页容器的id
            count: total, //数据总数，从服务端得到
            limit: query.pagesize, //每页显示几条数据
            curr: query.pagenum,
            layout: ["count", "limit", "prev", "page", "next", "skip"],
            limits: [5, 10, 15, 20],
            jump: function (obj, first) {
                // console.log(first);
                query.pagenum = obj.curr;
                query.pagesize = obj.limit;
                // 首行不执行
                if (!first) {
                    initUsersList()
                }
            },

        });
    }
    //----------------------------------------------------------------
    initUsersList();

    //----------------------------------------------------------------
    //表单验证
    form.verify({
        pwd: [/^[\S]{6,12}$/, '密码必须6到12位，且不能出现空格'],
        repwd: function (value) {
            var pwd = $('#form_addUser [name=password]').val();
            // console.log(pwd);
            if (pwd != value) {
                return '两次密码不一致！'
            }
        },
        edit_repwd: function (value) {
            var pwd = $('#form_editUser [name=password]').val();
            // console.log(pwd);
            if (pwd != value) {
                return '两次密码不一致！'
            }
        },
        role: [/S/, "请选择角色"],
        sno: [/^[\S]{9}$/, '学号或工号必须9位，且不能出现空格']
    });
    //----------------------------------------------------------------
    //获取所有用户信息列表
    function initUsersList() {
        var username = $('#form_search [name = username]').val()
        // console.log(username);
        query.username = username;
        $.ajax({
            method: 'POST',
            url: '/my/info/visitAll',
            data: query,
            success: function (res) {
                var htmStr = template('tpl-table', res);
                $('tbody').html(htmStr)
                renderPage(res.total)
            }
        })
    }
    //----------------------------------------------------------------
    //所有用户信息模糊搜索需要的信息
    $('#form_search').on('submit', function (e) {
        e.preventDefault()
        initUsersList()
    })
    //----------------------------------------------------------------
    //为添加访客按钮绑定点击事件
    var addUser_index = null;
    $('#addUsers').on('click', function () {
        addUser_index = layer.open({
            type: 1,
            area: ['420px', ''],
            title: '来访登记',
            content: $('#dialog_addUsers').html(),
            success: function () {
                form.render();
            }
        })
    })
    //----------------------------------------------------------------
    //通过代理的形式，为 form_addUser 表单绑定 submit 事件
    $('body').on('submit', '#form_addUser', function (e) {
        e.preventDefault();
        // console.log($(this).serialize());
        var data = $(this).serialize();
        console.log(data);
        $.ajax({
            method: 'POST',
            url: '/my/info/visit',
            data: data,
            success: function (res) {
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                initUsersList();
                layer.msg('登记成功！')
                // 根据索引，关闭对应的弹出层
                layer.close(addUser_index)
            }
        })
    })
    //----------------------------------------------------------------
    //通过代理方式为 btn_editUser 按钮绑定 click 事件
    var editUser_index = null;
    $('tbody').on('click', '.btn_editUser', function () {
        editUser_index = layer.open({
            type: 1,
            area: ['420px', ''],
            title: '修改学生信息',
            content: $('#dialog_editUsers').html(),
            success: function () {
                form.render();
            }
        })
        var id = $(this).attr('data_id')
        // console.log(id)
        $.ajax({
            method: 'GET',
            url: '/my/userinfo/user/' + id,
            success: function (res) {
                form.val('form_edit', res.data)
            }
        })
    })
    //----------------------------------------------------------------
    //通过代理的形式，为 edit_addUser 表单绑定 submit 事件
    $('body').on('submit', '#form_editUser', function (e) {
        e.preventDefault();

        var data = {
            id: $('#form_editUser [name = id]').val(),
            username: $('#form_editUser [name = username]').val(),
            sno: $('#form_editUser [name =sno]').val(),
            college: $('#form_editUser [name = college]').val(),
            aclass: $('#form_editUser [name = aclass]').val(),
            phone_number: $('#form_editUser [name = phone_number]').val(),
            password: $('#form_editUser [name = password]').val(),
            access_name: "学生",
        }
        console.log(data);
        $.ajax({
            method: 'POST',
            url: '/my/userinfo/updateUser',
            data: data,
            success: function (res) {
                // console.log(res);
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg('更新用户信息成功');
                layer.close(editUser_index);
                initUsersList();
            }
        })
    })
    //----------------------------------------------------------------
    //通过代理方式为 btn_checkUser 按钮绑定 click 事件：审核用户权限
    $('tbody').on('click', '.btn_checkUser', function () {
        var id = $(this).attr('data_id');
        // console.log(id);
        $.ajax({
            method: 'GET',
            url: '/my/info/visitOut/' + id,
            success: function (res) {
                // console.log(res);
                if (res.status !== 0) {
                    return layer.msg(res.message)
                }
                layer.msg(res.message);
                initUsersList();
            }
        })
    })
    //----------------------------------------------------------------
    //通过代理方式为 btn_deleteUser 按钮绑定 click 事件：删除用户
    $('tbody').on('click', '.btn_deleteUser', function () {
        var id = $(this).attr('data_id');
        layer.confirm('确定删除此用户？', {
            icon: 3,
            title: '提示'
        }, function (deleteUser_index) {
            //do something
            // console.log(id);
            $.ajax({
                method: 'POST',
                url: '/my/userinfo/deleteUser',
                data: {
                    id: id,
                },
                success: function (res) {
                    if (res.status !== 0) {
                        return layer.msg(res.message)
                    }
                    layer.msg(res.message);
                    initUsersList();
                    layer.close(deleteUser_index);
                }
            })

        });

    })
})